<template>
  <view class="withdrawal">
    <Navbar :title="t('reco.title')"> </Navbar>
    <view class="type">
      <view
        class="left"
        @click="leftchange"
        :class="{ clicked: leftisClicked }"
      >
        {{ t("reco.order") }}
      </view>
      <view
        class="right"
        @click="rightchange"
        :class="{ clicked: rightisClicked }"
      >
        {{ t("reco.with") }}
      </view>
    </view>
    <!-- 渲染 -->
    <view v-if="balanceList.length > 0">
      <view v-if="isOrder">
        <scroll-view scroll-y class="abc" @scrolltolower="loadNextPage">
          <!-- <view class="list">
          <view class="list-left">
            {{ t('reco.rec') }}<view>24.02.12</view>
          </view>
          <view class="list-right"> +2.0142USDT </view>
        </view> -->
          <view class="list" v-for="(item, index) in balanceList" :key="index">
            <view class="list-left"
              >{{ item.content }}<view>{{ item.created_at }}</view>
            </view>
            <view class="list-right1"> {{ item.money }}USDT </view>
          </view>
        </scroll-view>
      </view>
      <view v-if="!isOrder">
        <scroll-view scroll-y class="abc" @scrolltolower="loadNextPage">
          <view class="list" v-for="(item, index) in balanceList" :key="index">
            <view class="list-left"
              >{{ item.content }}<view>{{ item.created_at }}</view>
            </view>
            <view class="list-right">
              <view>
                <view>{{ item.money }}USDT</view>
                <view class="address">{{ showAccount(item.to_address) }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <nodata v-else></nodata>
  </view>
</template>

<script setup>
import nodata from "../../components/nodata.vue";

import { ref, onMounted } from "vue";
import api from "../../networks/apis";
//改标题
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import Navbar from "../../components/Navbar.vue";
const navbarTitle = ref("");
const isOrder = ref(true); //控制菜单
// 切换标题
const leftisClicked = ref(true);
const rightisClicked = ref(false);
const leftchange = async () => {
  type.value = 2;
  page.value = 1;
  balanceList.value = [];
  await getUserBalance();
  leftisClicked.value = true;
  rightisClicked.value = false;
  isOrder.value = true;
};
const rightchange = async () => {
  type.value = 1;
  page.value = 1;
  balanceList.value = [];
  await getUserBalance();
  rightisClicked.value = true;
  leftisClicked.value = false;
  isOrder.value = false;
};
const showAccount = (account) => {
  if (!account) return "";
  let fixed_address =
    account.slice(0, 8) + "***" + account.slice(account.length - 4);
  return fixed_address;
};
//获取用户余额
const pagesize = ref(8);
const page = ref(1);
const type = ref(2);
const balanceList = ref([]);
// const getUserBalance = async () => {
//   const { data } = await api.getBalanceAPI(
//     pagesize.value,
//     page.value,
//     type.value
//   );
//   console.log('----->余额', data);
//   balanceList.value = data;
// };
// getUserBalance();
//分页
const getUserBalance = async () => {
  const { data } = await api.getBalanceAPI(
    pagesize.value,
    page.value,
    type.value
  );

  if (data.length > 0) {
    balanceList.value = [...balanceList.value, ...data];
    page.value++;
  } else {
    // 如果返回数据为空，说明已经到达列表末尾
    console.log("已经到达列表末尾");
  }
};

const loadNextPage = async () => {
  await getUserBalance();
};

onMounted(() => {
  getUserBalance();
});
</script>

<style lang="scss" scoped>
.abc {
  height: 100vh;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);
}
.withdrawal {
  width: 750rpx;
  height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);

  .type {
    width: 688rpx;
    height: 134rpx;
    font-size: 28rpx;
    margin: 18rpx auto;
    font-family: Arial, Arial;
    line-height: 33rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-image: url("/static/drawings/Rectangle 47.png");
    background-size: cover;
    background-repeat: no-repeat;

    .left {
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
    }

    .right {
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
    }

    .clicked {
      padding-bottom: 20rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #ffffff;
      line-height: 33rpx;
      border-bottom: 2px solid white;
    }
  }

  .list {
    width: 690rpx;
    /* height: 168rpx; */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-image: url("/static/drawings/Rectangle 33.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 22rpx;

    .list-left {
      width: 150rpx;
      height: 168rpx;
      font-size: 24rpx;
      font-family: Arial, Arial;
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
      line-height: 28rpx;
      margin-right: 35rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }

    .list-right {
      display: flex;
      align-items: center;
      width: 220rpx;
      height: 40rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #fff;
      .address {
        margin-top: 15rpx;
        line-height: 28rpx;
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.5);
        font-weight: normal;
      }
      .img {
        width: 30rpx;
        height: 30rpx;
      }
    }

    .list-right1 {
      width: 220rpx;
      height: 40rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #d03e00;

      .img {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
</style>
